<template>
  <div style="height:100%;width:100%">
    <el-row class="mainContent" >
      <el-card class="box-card" v-loading="isLoading">
        <div slot="header" class="clearfix">
          <span>费率配置</span>
          <el-button style="position: relative;left: 10%;" type="primary" size="small"  @click="edit(form)" >{{btnText}}</el-button>
        </div>
        <div v-if="dataNoNull" >
          <el-form label-width="130px"  :model="form" >
            <div style="width:49%;float: left;min-height:275px;">
              <el-form-item label="非交易日">
                <label ><input name="Fruit" type="radio" :checked="form.financingFeeVo.weekdayDeduct==1" @click="form.financingFeeVo.weekdayDeduct=1" :disabled="isEdit"/>扣息</label>&emsp;&emsp;&emsp;&emsp;
                <label ><input name="Fruit" type="radio" :checked="form.financingFeeVo.weekdayDeduct==2" @click="form.financingFeeVo.weekdayDeduct=2" :disabled="isEdit"/>不扣息</label>
              </el-form-item>

              <el-form-item label="结算周期">
                <el-select v-model="form.financingFeeVo.settleType"    @change="changed" style='width:50%'>
                  <el-option
                    v-for="item in optionss"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="扣息时间">
                <el-input v-model="form.financingFeeVo.settleTime" :disabled="true" style="width:50%"></el-input>
              </el-form-item>
              <el-form-item label="杠杆倍数限制">
                <el-input v-model.number="form.financingFeeVo.minLeverage" :disabled="isEdit" style="width:20%" @blur="minLeverageXz"></el-input>&nbsp; ~ &nbsp;
                <el-input v-model.number="form.financingFeeVo.maxLeverage" :disabled="isEdit" style="width:20%" @blur="maxLeverageXz"></el-input>
              </el-form-item>
              <el-form-item label="杠杆倍数" >
                <el-tag class="el-tag-ggbs"
                        :key="tag"
                        v-for="(tag,index) in form.leverages"
                        :closable="!isEdit"
                        :disable-transitions="false"
                        @close="handleClosee(tag)">
                  <span  >
                    {{tag}}倍
                  </span>
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisiblee"
                  v-model="inputValuee"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirmm"
                  @blur="handleInputConfirmm"
                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInputt" v-show="!isEdit">+ 增加杠杆</el-button>
              </el-form-item>
            </div>
            <div  style="width:1px;float: left;background-color: grey;height: 200px; margin-top: 16px;opacity: 0.4"></div>
            <div style="width:50%;float: left;min-height:275px">
            <!---->
              <!--<el-form-item >-->
                <!--<div  style="width:90%;float: left;background-color: grey;height: 1px; margin-left: 16px;opacity: 0.4"></div>-->
              <!--</el-form-item>-->

              <el-form-item label="警戒平仓模板">
                <div v-for="item in form.warnRiskConfigList">
                  <el-row>
                    <el-col :span="3"> <el-tag type="warning">{{item.leverage}}倍</el-tag></el-col>
                    <el-col :span="20" :offset="1"><el-input v-model="item.warnFlatId" :disabled="isEdit"  ></el-input></el-col>
                  </el-row>
                </div>
              </el-form-item>
              <el-form-item label="借款额限制">
                <el-input v-model.number="form.financingFeeVo.minLoan" :disabled="isEdit" style="width:30%" @blur="minMoney()"></el-input>万元&emsp;~&emsp;
                <el-input v-model.number="form.financingFeeVo.maxLoan" :disabled="isEdit" style="width:30%" @blur="maxMoney()"></el-input>万元
              </el-form-item>
              <el-form-item label="借款额" >
                <el-tag
                  :key="tag"
                  v-for="tag in form.financingFeeVo.initLoan"
                  :closable="!isEdit"
                  :disable-transitions="false"
                  @close="handleClose(tag)">
                  {{tag}}
                </el-tag>
                <el-input
                  class="input-new-tag"
                  v-if="inputVisible"
                  v-model="inputValue"
                  ref="saveTagInput"
                  size="small"
                  @keyup.enter.native="handleInputConfirm"
                  @blur="handleInputConfirm"

                >
                </el-input>
                <el-button v-else class="button-new-tag" size="small" @click="showInput" v-show="!isEdit">+ 增加借款额</el-button>
              </el-form-item>
            </div>
            <div  style="clear: both;"></div>
            <div  style="width:100%;height:1px;background-color: grey;opacity: 0.3"></div>
            <h4 style="font-weight:400;position: relative"><span style="text-align: center">当前费率阶梯</span>
              <el-button style="position: relative;left: 6%;" type="text" size="small" @click="add(form.financingFeeVo.financingFeeRates)" v-show="!isEdit">添加</el-button>
            </h4>
            <template>
              <el-table :data="form.financingFeeVo.financingFeeRates" style="float:left;width: 100%;overflow-y: scroll;height:300px">
                <el-table-column label="借款金额区间" >
                  <template slot-scope="scope">
                    最小&nbsp;<el-input v-model="scope.row.amountMin"  style="width:70%"  :disabled="isEdit" ></el-input>&nbsp;万元<br>
                    最大&nbsp;<el-input v-model="scope.row.amountMax" style="width:70%"  :disabled="isEdit"></el-input>&nbsp;万元
                  </template>
                </el-table-column>
                <el-table-column
                  prop="name"
                  label="费率模式"
                >
                  <template slot-scope="scope">
                    <el-select v-model="scope.row.type" placeholder="状态"  :disabled="isEdit">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                      </el-option>
                    </el-select>
                  </template>
                </el-table-column>
                <el-table-column
                  prop="address"
                  label="费率值(固定金额不能大于1)">
                  <template slot-scope="scope">
                    <el-input v-model.number="scope.row.feeValue"  style="width:50%"  :disabled="isEdit" v-if="scope.row.type==1"></el-input>
                    <el-input  v-model.number="scope.row.feeValue"  style="width:50%"  :disabled="isEdit" v-else>
                    </el-input>
                    &emsp;<span v-if="scope.row.type==1">%</span><span v-else>元</span>/日&emsp;&emsp;
                    <el-button type="text" size="small" @click="del(scope.$index,scope.row)" v-show="!isEdit">删除</el-button>
                  </template>
                </el-table-column>
              </el-table>
              <div style="width: 100%;height:200px"></div>
            </template>
          </el-form>
        </div>
        <div v-else>
          <p style="margin-bottom:30px;color:grey;opacity: 0.4">暂无配置</p>
        </div>
        <!--<el-button  type="primary" @click="edit">{{btnText}}</el-button>-->
      </el-card>

    </el-row>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        btnText:'编辑',
        isEdit:true,
        dataNoNull:false,
        isLoading:false,
        isWeek:false,
        isCloseTags:false,
        checkedArr:[],
//        dynamicTags:['10000','20000','5000'],
        inputVisible: false,
        inputVisiblee:false,
        isTrue:true, //整体填写正确
        inputValue: '',
        inputValuee:'',
        form:{

        },
        flag:0,
        options:[{
          value:1,
          label:'按借款金额比例'
        },{
          value:2,
          label:'按固定金额'
        }],
        optionss:[{
          value:1,
          label:'每日'
        },{
          value:2,
          label:'每周'
        },{
          value:3,
          label:'每月'
        }],
      };
    },
    created() {
      if(this.dataNoNull){
        this.btnText = '编辑'
      }
      this.getUsers(1)
    },
    methods: {
      getUsers(val){
        this.isLoading = true
        this.$http('sys/fee/stockDetailList.do',{data:{settleType:val,tradeType: 7}}).then(resp=>{
          if(resp.code==1){
            this.dataNoNull = true
            this.form = resp.data;
            console.log(this.form)
            this.form.leverages = []
            for(var key in this.form.warnRiskConfigList){
              this.form.leverages.push(this.form.warnRiskConfigList[key].leverage) //杠杆倍数区间
            }
            this.form.financingFeeVo.initLoan = this.form.financingFeeVo.initLoan.split(',') //借款额限制

            for(var key in this.form.financingFeeVo.financingFeeRates){
              if(this.form.financingFeeVo.financingFeeRates[key].type == 1){
                this.form.financingFeeVo.financingFeeRates[key].feeValue = Number(this.form.financingFeeVo.financingFeeRates[key].feeValue * 100).toFixed(2) //数值阶梯
              }
              this.form.financingFeeVo.financingFeeRates[key].amountMax = this.form.financingFeeVo.financingFeeRates[key].amountMax / 10000 //借款额阶梯
              this.form.financingFeeVo.financingFeeRates[key].amountMin = this.form.financingFeeVo.financingFeeRates[key].amountMin / 10000
            }
            this.form.financingFeeVo.maxLoan = this.form.financingFeeVo.maxLoan / 10000 //最大借款额
            this.form.financingFeeVo.minLoan = this.form.financingFeeVo.minLoan / 10000
          }
          this.isLoading = false
        })
      },
      changed(val){
        this.isEdit = true
        this.btnText = '编辑'
        this.dataNoNull = true
        this.getUsers(val)
      },
      edit(form){
        if(this.btnText == '编辑'){
          if(!this.$store.state.routes.routes.ywFlOperate){
            this.$message({
              message:'无权限',
              type:'error'
            })
            return
          }
          this.isEdit = false;
          this.btnText = '保存'
          this.dataNoNull = true
        }else if(this.btnText == '添加'){
          this.btnText = '保存'
          this.dataNoNull = true
          this.isEdit = false
        }else{
          if(this.isTrue){
            var arr = []
            var arrWarn = []
            if(form.financingFeeVo.financingFeeRates.length>0){
              for(var key in form.financingFeeVo.financingFeeRates){
                if(form.financingFeeVo.financingFeeRates[key].type==1){
                  form.financingFeeVo.financingFeeRates[key].feeValue = Number(form.financingFeeVo.financingFeeRates[key].feeValue) / 100
                }
                var obj = {
                  amountMin:form.financingFeeVo.financingFeeRates[key].amountMin,
                  amountMax:form.financingFeeVo.financingFeeRates[key].amountMax,
                  type:form.financingFeeVo.financingFeeRates[key].type,
                  feeValue:form.financingFeeVo.financingFeeRates[key].feeValue,
                }
                arr.push(obj)
              }
            }else{
              arr.push({})
            }
            if(form.warnRiskConfigList.length>0){
              for(var key in form.warnRiskConfigList){
                var obj = {
                  leverage:form.warnRiskConfigList[key].leverage,
                  warnFlatId:form.warnRiskConfigList[key].warnFlatId,
                }
                arrWarn.push(obj)
              }
            }else{
              arrWarn.push({})
            }
            if(form.leverages.length<=0){
              this.$message({
                message:'杠杆倍数不能为空',
                type:'error'
              })
              return
            }
            if(form.financingFeeVo.initLoan.length<=0){
              this.$message({
                message:'借款额不能为空',
                type:'error'
              })
              return
            }
            for(var key in this.form.leverages){
              if(this.form.financingFeeVo.maxLeverage<this.form.leverages[key]){
                this.$message({
                  message:'最大杠杆倍数太小',
                  type:'error'
                })
                return
              }else if(this.form.financingFeeVo.minLeverage>this.form.leverages[key]){
                this.$message({
                  message:'最小杠杆倍数太大',
                  type:'error'
                })
                return
              }else{
                this.isTrue = true
              }
            }
            for(var key in this.form.financingFeeVo.initLoan){
              if((this.form.financingFeeVo.maxLoan * 10000)<Number(this.form.financingFeeVo.initLoan[key])){
                this.$message({
                  message:'最大借款额太小',
                  type:'error'
                })
                return
              }else if((this.form.financingFeeVo.minLoan * 10000)>Number(this.form.financingFeeVo.initLoan[key])){
                this.$message({
                  message:'最小借款额太大',
                  type:'error'
                })
                return
              }else{
                this.isTrue = true
              }
            }
            for(var key in this.form.warnRiskConfigList){
              if(this.form.warnRiskConfigList[key].warnFlatId == ''||this.form.warnRiskConfigList[key].warnFlatId == null || this.form.warnRiskConfigList[key].warnFlatId == undefined){
                this.$message({
                  message:'警戒平仓模板不能为空',
                  type:'error'
                })
                return
              }else{
                this.isTrue = true
              }
            }
            var realdata = {
              data:{
                // name:'',
                // feeTempid:'',
                // overnightRiskOn:'',
                // overnightRiskOff:'',
                // groupid:'',
                // feeid:'',
                // riskid:'',
                // overnightShowState:'',
                feerates:JSON.stringify(arr),
                tradeType:7,
                weekdayDeduct:form.financingFeeVo.weekdayDeduct,
                settleType:form.financingFeeVo.settleType,
                settleTime:form.financingFeeVo.settleTime,
                maxLoan:form.financingFeeVo.maxLoan,
                minLoan:form.financingFeeVo.minLoan,
                maxLeverage:form.financingFeeVo.maxLeverage,
                minLeverage:form.financingFeeVo.minLeverage,
                initLoan:form.financingFeeVo.initLoan.join(),
                warnriskConfigs:JSON.stringify(arrWarn)
              }
            }
            this.$http('sys/feetemp/addOrModify.do',realdata).then(resp=>{
            // this.$http('sys/feetemp/modifyUpgrade.do',realdata).then(resp=>{
              if(resp.code==1){
                this.$message({
                  message:resp.msg,
                  type:'success'
                })
              }else{
                this.$message({
                  message:resp.msg,
                  type:'error'
                })
              }
            })
            setTimeout(()=>{
              this.getUsers(1)
              this.isEdit = true
              this.btnText = '编辑'
              this.dataNoNull = true
            },1000)
          }else{
            this.$message({
              message:'请检查填写是否正规',
              type:'warning'
            })
          }
        }
      },
      del(index,row){
        for(var key in this.form.financingFeeVo.financingFeeRates){
          if(this.form.financingFeeVo.financingFeeRates[key].id== row.id){
            this.form.financingFeeVo.financingFeeRates.splice(key,1)
          }
        }
      },
      add(item){
        var obj = {
          amountMin: 0,
          amountMax: 0,
          type:1,
          feeValue: 0
        }
        item.push(obj);
      },
      handleClose(tag) {//借款额删除标签
        this.form.financingFeeVo.initLoan.splice(this.form.financingFeeVo.initLoan.indexOf(tag), 1);
      },
      handleClosee(tag) { //杠杆删除标签
        this.form.leverages.splice(this.form.leverages.indexOf(tag), 1);
//        this.form.warnRiskConfigList.splice(this.form.warnRiskConfigList.indexOf(tag), 1);
        console.log(tag)
        for(var key in this.form.warnRiskConfigList){
          if(this.form.warnRiskConfigList[key].leverage == tag){
            this.form.warnRiskConfigList.splice(key, 1);
          }
        }
        console.log(this.form.warnRiskConfigList.indexOf(tag))
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      showInputt() {
        this.inputVisiblee = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },
      handleInputConfirm() {
        var inputValue = this.inputValue;
        if (inputValue) {
          for(var key in this.form.financingFeeVo.initLoan){
            if(this.form.financingFeeVo.initLoan[key] == inputValue){
              this.$message({
                message:'该借款额已经存在',
                type:'warning'
              })
//              this.isTrue = false
              this.inputVisible = false;
              this.inputValue = '';
              return
            }
          }
          if(Number(this.inputValue) > Number(this.form.financingFeeVo.maxLoan * 10000)){
            this.$message({
              message:'借款金额必须小于最大借款额',
              type:'error'
            })
//            this.isTrue = false
            return
          }else if(Number(this.inputValue) < Number(this.form.financingFeeVo.minLoan * 10000)){
            this.$message({
              message:'借款金额必须小于最小借款额',
              type:'error'
            })
//            this.isTrue = false
            return
          }else{
            this.isTrue = true;
            this.form.financingFeeVo.initLoan.push(inputValue);
          }
        }
        this.inputVisible = false;
        this.inputValue = '';
      },
      handleInputConfirmm(){
        var inputValue = this.inputValuee;

        if (inputValue) {
          for(var key in this.form.leverages){
            if(this.form.leverages[key] == inputValue){
              this.$message({
                message:'该倍数已经存在',
                type:'warning'
              })
//              this.isTrue = false
              this.inputVisiblee = false;
              this.inputValuee = '';
              return
            }
          }
          if(Number(inputValue) > Number(this.form.financingFeeVo.maxLeverage)){
            this.$message({
              message:'不能大于最大杠杆倍数',
              type:'error'
            })
//            this.isTrue = false
            return
          }else if(Number(inputValue) < Number(this.form.financingFeeVo.minLeverage)){
            this.$message({
              message:'不能小于最小杠杆倍数',
              type:'error'
            })
//            this.isTrue = false
            return
          }else{
            this.isTrue = true;
            this.form.leverages.push(inputValue);
            this.form.warnRiskConfigList.push({leverage:inputValue,warnFlatId:''})
          }
        }
        this.inputVisiblee = false;
        this.inputValuee = '';
      },
      minLeverageXz(){
        for(var key in this.form.leverages){
          if((this.form.financingFeeVo.minLeverage)>Number(this.form.leverages[key])){
            this.$message({
              message:'最小借款额太大',
              type:'error'
            })
//            this.isTrue = false;
            return
          }else{
            this.isTrue = true
          }
        }
      },
      maxLeverageXz(){
        for(var key in this.form.leverages){
          if((this.form.financingFeeVo.maxLeverage)<Number(this.form.leverages[key])){
            this.$message({
              message:'最大借款额太小',
              type:'error'
            })
//            this.isTrue = false;
            return
          }else{
            this.isTrue = true
          }
        }
      },
      maxMoney(){
        for(var key in this.form.financingFeeVo.initLoan){
          if((this.form.financingFeeVo.maxLoan *10000)<Number(this.form.financingFeeVo.initLoan[key])){
            this.$message({
              message:'最大借款额太小',
              type:'error'
            })
//            this.isTrue = false;
            return
          }else{
            this.isTrue = true
          }
        }
      },
      minMoney(){
        for(var key in this.form.financingFeeVo.initLoan){
          if((this.form.financingFeeVo.minLoan *10000)>Number(this.form.financingFeeVo.initLoan[key])){
            this.$message({
              message:'最小借款额太大',
              type:'error'
            })
//            this.isTrue = false;
            return
          }else{
            this.isTrue = true
          }
        }
      }
    },
  };
</script>

<style scoped>
  .box-card{
    width:80%;
    margin: 0 auto;
  }
  .el-checkbox+.el-checkbox{
    margin-left:20px
  }
  .el-checkbox-group>label:nth-child(1){
    margin-left:20px
  }
  #jiekuane>div{
    padding:0 25px!important;
  }
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
  .el-tag-ggbs:hover{
    cursor: pointer !important;
  }
  .el-tag-ggbs-active{
    background-color: rgba(230,162,60,.1);
    border-color: rgba(230,162,60,.2);
    color: #e6a23c;
  }
</style>
